
<template>
  <div>
    <Header />
    <div class="back">
      <div class="container" style="margin: 0 auto">
        <Nested :list='nestedList' />
        <div class="default-box" style="margin-top: 0; padding: 25px 0;">
          <div class="box-title">
            <div class="vertical-line" />
            <span>全部专业</span>
          </div>
          <div class="content">
            <div class="search">
              <input type="text" placeholder="搜索专业">
              <button>搜索</button>
            </div>
            <Filter :list="subject" :selectList="selectList" title="所属地区" />
            <Filter :list="subject2" :selectList="selectList" title="学科门类" />
          </div>
        </div>
        <div class="content2 flex">
          <MajorList class="list" style="margin-bottom: 10px;" />
          <div style="width: 330px;">
            <MajorPopular />
            <UniversityPopular style="margin:10px 0;" />
          </div>

        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import Nested from '@/components/nested/index.vue'
import Filter from '@/components/filter/index.vue'
import MajorList from '@/components/majorList/index.vue'
import { NestedType } from '@/components/nested/nested'
import { subject, subject2 } from '@/components/universityNavList/data'
import UniversityPopular from '@/components/universityPopular/index.vue'
import MajorPopular from '@/components/majorPopular/index.vue'
const nestedList = ref<NestedType[]>([{ name: '首页', path: '/' }, { name: '专业库', path: '/major' }])
const selectList = ref<string[]>(['不限', '全部'])

</script>

<style lang="less" scoped>
@import "./index.less";
</style>
